<template>
  <div class="payment">
    <div class="mui-scroll-wrapper">
      <div class="mui-scroll">
        <header id="header" class="mui-bar mui-bar-nav">
          <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
          <h1 class="mui-title">转账</h1>
        </header>
        <div class="mui-content">
          <form class="mui-input-group content" @submit.prevent="payment" :model="paymentData">
            <div class="mui-input-row z-row" :class="{'is-danger':errors.has('paymentType')}">
              <label>转出类型</label>
              <input
                name="paymentType"
                v-model="paymentType.text"
                type="select"
                data-vv-as="转出类型"
                placeholder="请选择转出类型"
                v-validate="'required'"
                v-tap="{method:selectPaymentType}"/>
            </div>
            <span class="error-message" v-show="errors.has('paymentType')">{{errors.first('paymentType')}}</span>
            <div v-show="paymentType.value!='0'">
              <div class="mui-input-row z-row" :class="{'is-danger':errors.has('phone')}">
                <label>手机号码</label>
                <input
                  name="phone"
                  v-model="paymentData.phone"
                  type="text"
                  class="mui-input-clear"
                  maxlength="11"
                  v-validate="'required|numeric|mobile'"
                  placeholder="请输入对方手机号"/>
              </div>
              <span class="error-message" v-show="errors.has('phone')">{{errors.first('phone')}}</span>
              <div class="mui-input-row z-row" :class="{'is-danger':errors.has('money')}">
                <label>转账金额</label>
                <input
                  name="money"
                  v-model="paymentData.money"
                  type="text"
                  class="mui-input-clear"
                  data-vv-as="转账金额"
                  v-validate="'required|money'"
                  placeholder="请输入转账金额可精确到分"/>
              </div>
              <span class="error-message" v-show="errors.has('money')">{{errors.first('money')}}</span>
              <div class="mui-button-row z-row z-regbutton">
                <button
                  id="loginBut"
                  type="submit"
                  class="mui-btn mui-btn-primary mui-btn-outlined"
                  data-loading-text="提交中"
                  data-loading-icon="mui-spinner mui-spinner-custom">提交</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        paymentData:{
          phone:'',
          money:'',
        },
        paymentType:{value: "0", text: ""},
      }
    },
    created(){
      this.getRouterData();
    },
    mounted(){
      mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
      });
    },
    methods:{
      selectPaymentType(){
        var that = this;
        var picker = new mui.PopPicker();
        picker.setData([
          {value:'1',text:'签到购物劵'},
          {value:'2',text:'笑笑购物劵'},
        ]);
        picker.show(function (selectItems) {
          that.paymentType = selectItems[0];
        })
      },
      payment(){
        var that = this;
        that.$validator.validate().then((result)=>{
          if(result){
            var userInfo = that.$store.state.user.userInfo;
            if(that.paymentType.value==1 && userInfo.sign_fee < that.paymentData.money){
              mui.alert("账户金额不足");return;
            }
            if(that.paymentType.value==2 && userInfo.balance_fee < that.paymentData.money){
              mui.alert("账户金额不足");return;
            }
            if(userInfo.mobile==that.paymentData.phone){mui.alert("只允许向他人转账");return;}
            mui("#loginBut").button('loading');
            that.$http.post(that.$http.adornUrl(that.$api.payment), {
              phone:that.paymentData.phone,
              money:that.paymentData.money,
              paymentType:that.paymentType.value,
            }).then(function(res){
              mui.toast(res.errmsg);
              if(res.errno == 0){
                mui.alert("操作成功","提示","确认",function(){
                  that.$router.go(-1);
                });
              }else{
                mui("#loginBut").button('reset');
              }
            }).catch(function (err) {
              mui.toast("执行失败请重试");
              mui("#loginBut").button('reset');
              console.log(err);
            });
          }
        });
      },
      getRouterData() {
        var that = this;
        that.paymentData.phone = that.$route.params.phone;
      }
    }
  }
</script>

<style scoped lang="less">
  .payment{
    .mui-scroll-wrapper{
      background-color: #fff;
    }
    .mui-bar{
      background-color: #fff;
      .mui-title{
        font-size: 0.36rem;
      }
    }
    .mui-bar-nav {
      -webkit-box-shadow: 0 1px 6px #e6e6e6;
      box-shadow: 0 1px 6px #e6e6e6;
    }
    .mui-input-group:after{
      height: 0px;
    }
    .mui-input-group:before{
      height: 0;
    }
    .mui-input-group .mui-input-row:after{
      height: 0px;
    }
    .content{
      padding:1.1rem 0.3rem 0 0.3rem;
      .z-row{
        height:0.8rem;
        margin-bottom:0.36rem;
        border:1px solid #ccc;
        border-radius: 0.1rem;
        label{
          font-size: 0.3rem;
          line-height: 0.8rem;
          padding:0 15px;
          width: 30%;
          border-right: 1px solid #ccc;
        }
        input{
          font-size: 0.3rem;
          height: 0.8rem;
          line-height: 0.8rem;
          width:70%;
          float: left;
          padding-left: 0.2rem;
        }
      }
      .z-regbutton{
        margin-bottom:0;
        padding-top: 0px;
        border:0;
        button{
          width:100%;
          height:100%;
          border-radius: 0.2rem;
        }
      }
      .is-danger{
        border:1px solid red;
        margin-bottom:0;
      }
      .error-message{
        font-size: 0.18rem;
        color:red;
      }
    }
  }
</style>
